// 引入axios组件
import axios from 'axios';
import qs from 'qs'; // 处理数据  qs.stringify(params)
// import {productaxios,pro} from '@/assets/js/productaxios'
import { checkRule } from '@/assets/js/public';
// 引入公共js文件
export default {
  data() {
    return {
      title: '', // 面包屑标题
      search: '',
      modal1: false, // 模态框显示开关，true显示   false不显示
      param: '', // 点击编辑、删除的时候对应操作的那个id
      name: '', // 品牌名称
      cate_id: '', // 分类id
      putpage: '',
      columns7: [
        {
          // type: 'index',
          title: '排序',
          align: 'center',
          key: 'sort_no',
          // sortable:true,
          render: (h, params) => {
            const self = this;
            return h('div', [
              h('Input', {
                props: {
                  placeholder: '请输入',
                  value: params.row.sort_no,
                  // 'v-model':value
                },
                on: {
                  'on-blur': (event) => {
                    // 这是一个失去焦点事件
                    const sort = event.target.value;
                    this.getSort(sort, params.row.id);
                  },
                },
              }),
            ]);
          },
        },
        {
          title: '商品名称',
          key: 'shop_name',
          render: (h, params) => h('div', [h('strong', params.row.shop_name)]),
        },
        {
          title: '商品货号',
          key: 'shop_num',
        },
        {
          title: '所属分类',
          key: 'cate_name',
        },
        {
          title: '基础价',
          key: 'low_price',
        },
        {
          title: '点击量',
          key: 'click_num',
        },
        {
          title: '销量',
          key: 'sell_num',
        },
        {
          title: '总库存',
          key: 'repertory',
        },
        {
          title: '录入时间',
          key: 'addtime',
        },
        {
          title: '是否置顶',
          key: 'action',
          align: 'center',
          render: (h, params) =>
            h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.is_top(params.row.id);
                    },
                  },
                },
                params.row.topstatus,
              ),
            ]),
        },
        {
          title: '是否新品',
          key: 'action',
          align: 'center',
          render: (h, params) =>
            h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.is_new(params.row.id);
                    },
                  },
                },
                params.row.newstatus,
              ),
            ]),
        },
        {
          title: '是否热卖',
          key: 'action',
          align: 'center',
          render: (h, params) =>
            h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.is_hot(params.row.id);
                    },
                  },
                },
                params.row.hotstatus,
              ),
            ]),
        },
        {
          title: '是否上架',
          key: 'action',
          align: 'center',
          render: (h, params) =>
            h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.is_sale(params.row.id);
                    },
                  },
                },
                params.row.salestatus,
              ),
            ]),
        },
        {
          title: '操作选项',
          key: 'action',
          align: 'center',
          render: (h, params) =>
            h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'info',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.show(params.row.id);
                    },
                  },
                },
                '编辑',
              ),
              /* h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id);
                    }
                  }
                },
                "删除"
              )// */
            ]),
        },
      ],
    };
  },
  created() {
    const self = this;
    this.$Spin.show();
    setTimeout(() => {
      this.$Spin.hide();
    }, 700);
    const spage = this.$route.query.page;
    const asearch = this.$route.query.search;
    axios({
      method: 'post',
      url: '/admin/product/productList',
      data: { page: spage, search: asearch },
    })
      .then((response) => {
        checkRule(response, self); // 检查是否有权限
        self.putpage = spage;
        self.$store.commit('getProductList', response.data);
      })
      .catch((response) => {});
  },
  // 用来获取VUEX中的文件
  computed: {
    data() {
      // console.log(this.$store.state.product.productlistshow);
      return this.$store.state.product.productlistshow;
    },
    page() {
      return this.$store.state.product.productlist.total;
    },
  },
  methods: {
    // 切换置顶
    is_top(shopid) {
      // 引入外部js文件中的方法
      // productaxios(shopid);
      // pro();
      const self = this;
      axios({
        method: 'post',
        url: '/admin/product/productIsTop',
        data: {
          shopid,
        },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          self.$store.commit('getProductListAgain', self.putpage);
          self.$Message.success('操作成功');
        })
        .catch((response) => {});
    },
    // 切换下架
    is_sale(shopid) {
      const self = this;
      axios({
        method: 'post',
        url: '/admin/product/productIsSale',
        data: {
          shopid,
        },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          self.$store.commit('getProductListAgain', self.putpage);
          self.$Message.success('操作成功');
        })
        .catch((response) => {});
    },
    // 切换热卖
    is_hot(shopid) {
      const self = this;
      axios({
        method: 'post',
        url: '/admin/product/productIsHot',
        data: {
          shopid,
        },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          self.$store.commit('getProductListAgain', self.putpage);
          self.$Message.success('操作成功');
        })
        .catch((response) => {});
    },
    // 切换是否新品
    is_new(shopid) {
      const self = this;
      axios({
        method: 'post',
        url: '/admin/product/productIsNew',
        data: {
          shopid,
        },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          self.$store.commit('getProductListAgain', self.putpage);
          self.$Message.success('操作成功');
        })
        .catch((response) => {});
    },
    // 更新排序方法(完成)
    getSort(value, artid) {
      const self = this;
      for (const el of self.data) {
        console.log(el.id);
        if (el.id == artid) {
          el.sort_no = value;
        }
      }
      // 更新排序请求
      axios({
        method: 'post',
        url: '/admin/product/productSort',
        data: {
          param: this.data,
        },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          self.$store.commit('getProductListAgain', self.putpage);
          self.$Message.success('操作成功');
        })
        .catch((response) => {});
    },
    // 添加商品跳页
    addArticle() {
      this.$router.push({
        path: '/productupdate', // 这是路由名称
      });
    },
    // 分页的钩子函数，当跳页的时候重新请求（将页码发给后台）
    getpage(page) {
      const self = this;
      this.$Spin.show();
      setTimeout(() => {
        this.$Spin.hide();
      }, 800);
      if (page == undefined) {
        page = 1;
      }
      this.putpage = page;
      axios({
        method: 'post',
        url: '/admin/product/productList',
        data: {
          page,
          search: self.search,
        },
      })
        .then((response) => {
          console.log(response.data);
          self.$store.commit('getProductList', response.data);
        })
        .catch((response) => {});
      this.$router.push({
        path: '/product', // 这是路由名称
        query: { page, search: self.search },
      });
    },
    /**
     * 编辑当前品牌
     * localStorage html5新定义的属性，存在兼容问题  使用方法参考下边网址
     * https://www.cnblogs.com/st-leslie/p/5617130.html
     * https://segmentfault.com/q/1010000010175869?sort=created
     */
    show(index) {
      this.$router.push({
        path: '/productupdate', // 这是路由名称
        query: { shopid: index },
      });
    },
    /**
     * 删除当前商品(没做删除)
     * 同页面刷新不建议使用路由，再此请求数据
     * const定义的变量不可修改
     */
    remove(modelid) {
      this.modal1 = true;
      this.param = modelid;
    },
    ok() {
      const self = this; // 将this对象附到一个不可更改的变量中~
      axios({
        method: 'post',
        url: '/admin/product/productModelDel',
        data: { modelid: self.param },
      })
        .then((response) => {
          checkRule(response, self); // 检查是否有权限
          if (response.data.code == 1) {
            if (self.param.index == 0 && self.putpage - 1 >= 1) {
              self.$store.commit(
                'getProductListAgain',
                self.putpage - 1,
                self.search,
              );
            }
            // self.data6.splice(param.index, 1);//如果把那个1改成0，就是不删除
            self.$Message.success(response.data.msg);
          } else {
            self.$Message.error(response.data.msg);
          }
        })
        .catch((response) => {});
    },
    cancel() {
      this.modal1 = false;
    },
  },
};
